/*!
 * Polkascan Explorer UI
 * Copyright (C) 2018-2022 Polkascan Foundation (NL)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

.home {
  min-height: 100%;
  box-sizing: border-box;
}

@keyframes sunrise-logo {
  from {
    transform: translate(-20%, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes sunrise-circle {
  from {
    fill: #cf25ff;
  }
  to {
    fill: #fa7878;
  }
}

@keyframes sunrise-circle-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sunrise-polka {
  from {
    fill: transparent;
  }
  to {
    fill: white;
  }
}

@keyframes sunrise-sky {
  from {
    background-position: top;
  }
  to {
    background-position: bottom;
  }
}

@keyframes sunrise-planet {
  from {
    background-color: #643d70;
    background-position: center 0;
  }
  to {
    background-color: #ff6482;
    background-position: center 150px;
  }
}

.home-header {
  position: relative;
  margin: 0;
  padding: 0;
  height: 150px;
  background: radial-gradient(at 30% 150%, #cf25ff, #350659 50%, #000) bottom;
  background-size: 100% 400px;
  text-indent: -9999px;
  overflow: hidden;
  animation: sunrise-sky 5s ease-out;

  svg {
    content: ' ';
    position: absolute;
    bottom: 30px;
    left: 30%;
    width: 189px;
    animation: sunrise-logo 5s ease-out;
  }

  circle {
    opacity: 0;
    animation: sunrise-circle 4s ease-out backwards, sunrise-circle-out 200ms 4.3s ease-out backwards;
  }

  path:nth-of-type(1) {
    animation: sunrise-polka 200ms 4s linear backwards;
  }

  path:nth-of-type(2) {
    fill: #fa7878;
  }

}

.home-buttons-heading {
  margin: 24px 0 10px 20%;
  font-size: 3em;
  font-weight: bold;
  text-indent: -10%;
  line-height: 1;
}

.home-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  gap: 16px;
  padding: 24px 0;
}
.home {
  background: #ff6482 linear-gradient(#fa7878 50px, #fa787800 150px);
  color: #fff;
  animation: sunrise-planet 5s ease-out forwards;

  .home-button {
    display: block;
    flex: 0 0 auto;
    width: 180px;
    padding-top: 186px;
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: 50% 20px;
    background-color: rgba(255,255,255,.5);
    box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;
    color: #000;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
  }

  .home-button--polkadot {
    background-image: url('../../../assets/chains/polkadot.svg');
  }

  .home-button--kusama {
    background-image: url('../../../assets/chains/kusama.svg');
  }

  .home-button--rococo {
    background-image: url('../../../assets/chains/rococo.svg');
  }

  .home-button--timebank {
    background-image: url('../../../assets/chains/timebank.svg');
  }
}
